<template>
	<view>
		<view class="head"></view>

		<view class="box">
			<view class="assistant-info">
				<view style="display: flex; align-items: center">
					<view class="assistant-img">
						<image src="../../static/img-6.png" mode="aspectFill"></image>
					</view>
					<view class="assistant-brief">
						<view class="name">李擎洲</view>
						<view class="brief-box">
							<text class="text1">
								<image class="sex-img" src="../../static/index/girl.png" mode=""></image>
								19
							</text>
							<text class="brief">
								白领
								<text class="wire"></text>
								167cm
								<text class="wire"></text>
								11361km
							</text>
						</view>
					</view>
				</view>
			</view>

			<view class="site-box z-margin-t-32">
				<view class="site" @click="toaddress">
					<view class="site-text">{{ address.address || '选择地址' }}</view>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
				<u-divider style=""></u-divider>
				<view class="project-title" @click="optionShow = true">
					<view class="">服务项目</view>
					<view class="more">
						<text>{{ serveItem }}</text>
						<u-icon name="arrow-right" size="12"></u-icon>
					</view>
				</view>
			</view>

			<view class="item-each">
				<view class="item-info-box">
					<view class="item-img">
						<image src="../../static/img-6.png" mode="aspectFill"></image>
					</view>
					<view class="item-info">
						<view class="item-name">台球</view>
						<view class="aggregate">1小时起</view>
						<view class="price-box">
							<view class="price">
								<text>25.00</text>
								/小时
							</view>
							<view class="amount">×1</view>
						</view>
					</view>
				</view>
				<u-divider style=""></u-divider>
				<view class="total">
					<view style="flex: 1"></view>
					合计：
					<text>
						<text click="symbol">￥</text>
						25
					</text>
				</view>
			</view>

			<view class="time-each" @click="timeScopeShow = true">
				<view class="">时间范围</view>
				<view class="elective">
					<text>{{ timeScope }}小时</text>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
			</view>
			<view class="time-each" @click="serveTimeShow = true">
				<view class="">时间</view>
				<view class="elective">
					<text>13:00-14:00</text>
					<u-icon name="arrow-right" size="12"></u-icon>
				</view>
			</view>
			<view class="time-each">
				<view class="">订单备注</view>
				<view class="input"><input type="text" placeholder="填写备注信息" /></view>
			</view>

			<view style="height: 120rpx; width: 1rpx"></view>
			<view class="btn-box">
				<view class="PlaceAnOrder-btn" @click="PlaceAnOrder">下单</view>
			</view>
		</view>

		<u-popup :round="20" :closeable="true" :show="mobileShow" mode="center" @close="close" @open="open">
			<view class="popup-mobile">
				<view class="mobile-title">设置手机号</view>
				<view class="import-box">
					<view class="import-title">手机号</view>
					<view class="import">
						<input type="text" v-model="mobile" placeholder="请输入手机号" />
					</view>
				</view>
				<view class="import-box">
					<view class="import-title">验证码</view>
					<view class="import-code">
						<input type="number" placeholder="请输入验证码" />
						<text @click="getCode">{{ getCodeText }}</text>
					</view>
				</view>
				<view class="mobile-btn">确定</view>
			</view>
		</u-popup>

		<u-popup :round="20" :closeable="true" :show="optionShow" mode="bottom" @close="close" @open="open">
			<view class="popup-option">
				<view class="option-title">服务项目</view>

				<view class="select-item">
					<view class="item1" @click="currentItem = 0" :class="{ 'active-item': currentItem == 0 }">台球</view>
					<view class="item1" @click="currentItem = 1" :class="{ 'active-item': currentItem == 1 }">麻将</view>
				</view>
				<view class="option-btn" @click="confirmItem">确定</view>
			</view>
		</u-popup>

		<u-popup :round="20" :closeable="true" :show="timeScopeShow" mode="bottom" @close="close" @open="open">
			<view class="popup-option">
				<view class="option-title">时间范围</view>

				<view class="time-scope">
					<view class="time-scope-each" @click="currentScope = index" :class="{ 'active-time-scope': currentScope == index }" v-for="(item, index) in timeScopeList">
						{{ item }}
					</view>
				</view>
				<view class="option-btn" @click="confirmScope">确定</view>
			</view>
		</u-popup>

		<!-- 服务时间 -->
		<u-popup bgColor="#F7F8FA" :round="20" :closeable="true" :show="serveTimeShow" mode="bottom" @close="close" @open="open">
			<view class="popup-serve-time">
				<view class="serve-time-head">
					<view class="serve-title">服务时间</view>

					<view class="week-date-box">
						<view class="week-date" v-for="(i, index) in weekDatesWithWeekday">
							<view class="week">{{ i.weekday }}</view>
							<view @click="selectDate(index)" class="date" :class="{ 'current-date': i.isToday }">{{ i.date.slice(-2) }}</view>
						</view>
					</view>
				</view>

				<view class="time-list-box">
					<view class="serve-time-each" v-for="i in 24">13:00</view>
				</view>

				<view class="serve-time-btn" @click="">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			mobileShow: false,
			getCodeText: '获取验证码',
			getCodeisWaiting: false,
			mobile: null,
			address: '',

			optionShow: false,
			currentItem: 0,
			serveItem: '台球',

			timeScopeShow: false, //时间范围
			timeScopeList: ['2', '2.5', '3', '3.5', '4', '4.5', '5', '5.5'],
			currentScope: '',
			timeScope: '',

			currentDate: new Date(),
			weekDatesWithWeekday: [],
			serveTimeShow: false,
			currentServeTime: '',
			serveTime: ''
		};
	},

	onLoad() {
		// 获取这周日期
		this.getWeekDates();
	},
	methods: {
		//切换选择服务时间
		selectDate(index) {
			this.weekDatesWithWeekday.forEach((item, i) => {
				if (i === index) {
					item.isToday = true;
				} else {
					item.isToday = false;
				}
			});
		},
		confirmScope() {
			this.timeScope = this.timeScopeList[this.currentScope];
			this.timeScopeShow = false;
		},
		//跳转地址管理
		toaddress() {
			this.$skip('/pages/selectAddress/selectAddress?id=' + this.address.id || 0, {
				selectAddress: (data) => {
					this.address = data;
					console.log('666');
				}
			});
		},
		confirmItem() {
			this.optionShow = false;
			if (this.currentItem) {
				this.serveItem = '麻将';
			} else {
				this.serveItem = '台球';
			}
		},
		PlaceAnOrder() {
			this.mobileShow = true;
		},
		getCode() {
			uni.hideKeyboard();
			if (this.getCodeisWaiting) {
				return;
			}
			if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.mobile)) {
				uni.showToast({
					title: '请填写正确手机号码',
					icon: 'none'
				});
				return false;
			}
			this.getCodeText = '发送中...';
			this.getCodeisWaiting = true;

			this.setTimer();
		},
		setTimer() {
			let holdTime = 60;
			this.getCodeText = '重新获取(60)';
			this.Timer = setInterval(() => {
				if (holdTime <= 0) {
					this.getCodeisWaiting = false;
					this.getCodeText = '获取验证码';
					clearInterval(this.Timer);
					return;
				}
				this.getCodeText = '重新获取(' + holdTime + ')';
				holdTime--;
			}, 1000);
		},
		// 获取本周日期和星期
		getWeekDates() {
			const firstDayOfWeek = new Date(this.currentDate);
			firstDayOfWeek.setDate(this.currentDate.getDate() - this.currentDate.getDay() + 1);

			const chineseWeekdays = ['日', '一', '二', '三', '四', '五', '六'];

			for (let i = 0; i < 7; i++) {
				const nextDate = new Date(firstDayOfWeek);
				nextDate.setDate(firstDayOfWeek.getDate() + i);
				const weekday = chineseWeekdays[nextDate.getDay()];
				const isToday = nextDate.toDateString() === this.currentDate.toDateString();
				this.weekDatesWithWeekday.push({ date: this.formatDate(nextDate), weekday: weekday, isToday: isToday });
			}
			console.log(this.weekDatesWithWeekday)
		},
		// 格式化日期为 YYYY-MM-DD 格式
		formatDate(date) {
			const year = date.getFullYear();
			const month = date.getMonth() + 1;
			const day = date.getDate();
			return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
		},
		open() {
			// console.log('open');
		},
		close() {
			this.mobileShow = false;
			this.optionShow = false;
			this.timeScopeShow = false;
			this.serveTimeShow = false;
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f7f8fa;
}
.head {
	width: 100%;
	height: 80rpx;
	background: #e5f6f2;
}

.box {
	width: 686rpx;
	background: #f7f8fa;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	padding: 40rpx 32rpx 0 32rpx;
	position: relative;
	top: -50rpx;

	.assistant-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.assistant-img {
			width: 100rpx;
			height: 100rpx;
			background: #d9d9d9;
			border-radius: 50%;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
			}
		}

		.assistant-brief {
			margin-left: 32rpx;
			.name {
				font-weight: bold;
				font-size: 30rpx;
				color: #1c274c;
			}
			.brief-box {
				.text1 {
					// width: 60rpx;
					display: inline-block;
					margin-left: 8rpx;
					height: 28rpx;
					line-height: 28rpx;
					background: #ff648f;
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					padding: 0 8rpx;
					font-weight: 500;
					font-size: 20rpx;
					color: #ffffff;
					.sex-img {
						width: 18rpx;
						height: 18rpx;
						vertical-align: middle;
					}
					margin-right: 16rpx;
				}
				.text2 {
					background-color: #3e9af4;
				}
				.brief {
					font-weight: 500;
					font-size: 22rpx;
					color: #a4a9b7;
					margin-top: 8rpx;
					.wire {
						display: inline-block;
						margin: 0 16rpx;
						width: 2rpx;
						height: 17rpx;
						background-color: #edeef1;
					}
				}
			}
		}
	}

	.site-box {
		width: 622rpx;
		// height: 251rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		padding: 32rpx;
		.site {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.site-text {
				font-weight: 800;
				font-size: 30rpx;
				color: #1c274c;
				line-height: 35rpx;
			}
		}
		.project-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;
			font-size: 28rpx;
			color: #1c274c;
			.more {
				display: flex;
				text {
					padding-right: 24rpx;
				}
			}
		}
	}

	.item-each {
		width: 638rpx;
		// height: 200rpx;
		background: #ffffff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: auto;
		margin-top: 24rpx;
		padding: 24rpx;
		.item-info-box {
			display: flex;
			align-items: center;
			.item-img {
				width: 152rpx;
				height: 152rpx;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				image {
					width: 152rpx;
					height: 152rpx;
					border-radius: 24rpx 24rpx 24rpx 24rpx;
				}
			}
			.item-info {
				margin-left: 24rpx;
				flex: 1;
				.item-name {
					font-weight: bold;
					font-size: 28rpx;
					color: #1c274c;
				}
				.aggregate {
					font-weight: 500;
					font-size: 22rpx;
					color: #6b738b;
					margin-top: 10rpx;
				}
				.price-box {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.price {
						font-weight: 500;
						font-size: 24rpx;
						color: #a4a9b7;
						margin-top: 16rpx;
						text {
							font-weight: bold;
							font-size: 34rpx;
							color: #ff7b18;
						}
					}
					.amount {
						font-weight: bold;
						font-size: 24rpx;
						color: #1c274c;
					}
				}
			}
		}

		.total {
			display: flex;
			align-items: center;
			font-weight: 500;
			font-size: 22rpx;
			color: #a4a9b7;
			text {
				font-weight: bold;
				font-size: 32rpx;
				color: #1c274c;
				.symbol {
					font-size: 22rpx;
				}
			}
		}
	}

	.time-each {
		width: 622rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: auto;
		margin-top: 24rpx;
		display: flex;
		justify-content: space-between;
		padding: 34rpx 32rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #1c274c;
		.elective {
			display: flex;
			font-weight: 500;
			text {
				padding-right: 24rpx;
			}
		}
		.input {
			width: 80%;
			font-weight: 500;
			input {
				font-size: 28rpx;
				text-align: right;
			}
		}
	}

	.btn-box {
		width: 100%;
		position: fixed;
		bottom: 40rpx;
		z-index: 9;
		.PlaceAnOrder-btn {
			width: 686rpx;
			height: 106rpx;
			background: #4bc264;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 800;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 106rpx;
			text-align: center;
		}
	}
}

.popup-mobile {
	width: 520rpx;
	background: #ffffff;
	border-radius: 48rpx 48rpx 48rpx 48rpx;
	padding: 40rpx;
	.mobile-title {
		font-weight: 800;
		font-size: 36rpx;
		color: #1c274c;
		text-align: center;
		padding-bottom: 8rpx;
	}
	.import-box {
		margin-top: 40rpx;
		.import-title {
			font-weight: bold;
			font-size: 28rpx;
			color: #1c274c;
		}
		.import {
			width: 520rpx;
			height: 90rpx;
			background: #f7f8fa;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 16rpx;
			input {
				font-size: 28rpx;
				height: 90rpx;
				padding: 0 32rpx;
			}
		}
		.import-code {
			width: 456rpx;
			height: 90rpx;
			background: #f7f8fa;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin-top: 16rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 32rpx;
			input {
				font-size: 28rpx;
				width: 250rpx;
			}
			text {
				font-weight: bold;
				font-size: 28rpx;
				color: #4bc264;
			}
		}
	}
	.mobile-btn {
		width: 520rpx;
		height: 90rpx;
		background: #4bc264;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 90rpx;
		text-align: center;
		margin-top: 64rpx;
	}
}

.popup-option {
	padding: 40rpx 32rpx;
	.option-title {
		font-weight: 800;
		font-size: 36rpx;
		color: #1c274c;
		text-align: center;
	}
	// 服务项目
	.select-item {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
		.item1 {
			width: 331rpx;
			height: 90rpx;
			background: #f7f8fa;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #1c274c;
			line-height: 90rpx;
			text-align: center;
		}
		.active-item {
			background-color: #4bc264;
			color: #fff;
		}
	}
	// 时间范围
	.time-scope {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-top: 16rpx;
		.time-scope-each {
			width: 154rpx;
			height: 97rpx;
			background: #f7f8fa;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #1c274c;
			line-height: 97rpx;
			text-align: center;
			margin-top: 24rpx;
		}
		.active-time-scope {
			background-color: #4bc264;
			color: #fff;
		}
	}
	.option-btn {
		width: 686rpx;
		height: 106rpx;
		background: #4bc264;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-weight: 800;
		font-size: 34rpx;
		color: #ffffff;
		line-height: 106rpx;
		margin-top: 72rpx;
		text-align: center;
	}
}

.popup-serve-time {
	.serve-time-head {
		width: 750rpx;
		height: 255rpx;
		background: #ffffff;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		.serve-title {
			font-weight: 800;
			font-size: 36rpx;
			color: #1c274c;
			text-align: center;
			padding-top: 40rpx;
		}

		.week-date-box {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-top: 36rpx;
			// flex-wrap: wrap;
			.week-date {
				text-align: center;
				.week {
					font-weight: bold;
					font-size: 24rpx;
					color: #a3abb9;
				}
				.date {
					width: 48rpx;
					height: 48rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #203460;
					border-radius: 50%;
					margin-top: 24rpx;
					line-height: 48rpx;
					text-align: center;
				}
				.current-date {
					background-color: #4bc264;
					color: #fff;
				}
			}
		}
	}

	.time-list-box {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		margin-top: 8rpx;
		width: 100%;
		height: 400rpx;
		overflow-x: hidden;
		overflow-y: scroll;
		
		.serve-time-each {
			margin-top: 24rpx;
			width: 154rpx;
			height: 97rpx;
			background: #ffffff;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #1c274c;
			line-height: 97rpx;
			text-align: center;
		}
	}

	.serve-time-btn {
		width: 686rpx;
		margin: auto;
		height: 106rpx;
		background: #4bc264;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-weight: 800;
		font-size: 34rpx;
		color: #ffffff;
		line-height: 106rpx;
		margin-top: 24rpx;
		text-align: center;
		margin-bottom: 40rpx;
	}
}
</style>
